<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>react之框架（dva&amp;&amp;mirror） | 小小错题本</title>
    <meta name="description" content="上面一章说到了 redux。但是。老实说、配置太麻烦繁琐。所以这段时间研究了下蚂蚁金服的两个 redux 框架，在此总结下做个笔记。

至于 redux 是什么，干什么用就不赘述了。这里只是简单说下使用这两个框架的感受，不强调 API 和代码编写，具体参考官方的文档即可：

   [mirror](https://github.com/mirrorjs/mirror/blob/ma ...">
    <meta name="generator" content="VuePress 1.3.0">
    
    
    <link rel="preload" href="/wrong_question_static_page/assets/css/0.styles.f30cb765.css" as="style"><link rel="preload" href="/wrong_question_static_page/assets/js/app.9022c753.js" as="script"><link rel="preload" href="/wrong_question_static_page/assets/js/4.8c1e4aa5.js" as="script"><link rel="preload" href="/wrong_question_static_page/assets/js/5.33f70f09.js" as="script"><link rel="preload" href="/wrong_question_static_page/assets/js/17.c4f16e4e.js" as="script"><link rel="prefetch" href="/wrong_question_static_page/assets/js/1.ec18c3a1.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/10.697d33d5.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/11.488795fa.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/12.12a9963e.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/13.9d026eb1.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/14.c44f0e4a.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/15.a258b8bb.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/16.92328039.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/18.4dfa396f.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/19.edba2346.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/20.082608a3.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/21.5ae0ad82.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/22.89457782.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/23.53bf9e28.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/24.ae06dfc6.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/25.1d7d04a4.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/6.af07a62f.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/7.2c342931.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/8.2545b8d2.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/9.0eaa1c27.js"><link rel="prefetch" href="/wrong_question_static_page/assets/js/vuejs-paginate.c4011005.js">
    <link rel="stylesheet" href="/wrong_question_static_page/assets/css/0.styles.f30cb765.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><section id="header-wrapper"><header id="header"><div class="header-wrapper"><div class="title"><a href="/wrong_question_static_page/" class="nav-link home-link">小小错题本 </a></div> <div class="header-right-wrap"><ul class="nav"><li class="nav-item"><a href="/wrong_question_static_page/tag/" class="nav-link">分类</a></li></ul> <div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <!----></div></div></header></section> <div id="mobile-header"><div class="mobile-header-bar"><div class="mobile-header-title"><a href="/wrong_question_static_page/" class="nav-link mobile-home-link">小小错题本 </a> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></div> <div class="mobile-menu-wrapper"><hr class="menu-divider"> <ul class="mobile-nav"><li class="mobile-nav-item"><a href="/wrong_question_static_page/tag/" class="nav-link">分类</a></li> <li class="mobile-nav-item"><!----></li></ul></div></div></div> <div class="content-wrapper"><div id="vuepress-theme-blog__post-layout"><article itemscope="itemscope" itemtype="https://schema.org/BlogPosting" class="vuepress-blog-theme-content"><header><h1 itemprop="name headline" class="post-title">
        react之框架（dva&amp;&amp;mirror）
      </h1> <div class="post-meta"><!----> <div class="post-meta-date"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg> <time pubdate itemprop="datePublished" datetime="2019-01-13T13:00:38.000Z">
      Sun Jan 13 2019
    </time></div> <ul itemprop="keywords" class="post-meta-tags"><li class="post-tag" data-v-2ac33c20><a href="/wrong_question_static_page/tag/react" data-v-2ac33c20> react </a></li><li class="post-tag" data-v-2ac33c20><a href="/wrong_question_static_page/tag/redux" data-v-2ac33c20> redux </a></li><li class="post-tag" data-v-2ac33c20><a href="/wrong_question_static_page/tag/react-redux" data-v-2ac33c20> react-redux </a></li><li class="post-tag" data-v-2ac33c20><a href="/wrong_question_static_page/tag/前端" data-v-2ac33c20> 前端 </a></li><li class="post-tag" data-v-2ac33c20><a href="/wrong_question_static_page/tag/dva" data-v-2ac33c20> dva </a></li><li class="post-tag" data-v-2ac33c20><a href="/wrong_question_static_page/tag/mirror" data-v-2ac33c20> mirror </a></li></ul></div></header> <div itemprop="articleBody" class="content__default"><ol><li><p>上面一章说到了 redux。但是。老实说、配置太麻烦繁琐。所以这段时间研究了下蚂蚁金服的两个 redux 框架，在此总结下做个笔记。</p></li> <li><p>至于 redux 是什么，干什么用就不赘述了。这里只是简单说下使用这两个框架的感受，不强调 API 和代码编写，具体参考官方的文档即可：</p> <ul><li><a href="https://github.com/mirrorjs/mirror/blob/master/docs/zh/api.md" target="_blank" rel="noopener noreferrer">mirror<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://dvajs.com/api/" target="_blank" rel="noopener noreferrer">dva<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ol> <h2 id="_1-使用体会："><a href="#_1-使用体会：" class="header-anchor">#</a> 1.使用体会：</h2> <h3 id="_1-dva-使用起来更像一个框架，有自己的-模块、路由相关配置，文件结构相对-mirror-严格一些。而-mirror-更像一个库。"><a href="#_1-dva-使用起来更像一个框架，有自己的-模块、路由相关配置，文件结构相对-mirror-严格一些。而-mirror-更像一个库。" class="header-anchor">#</a> 1. dva 使用起来更像一个框架，有自己的 模块、路由相关配置，文件结构相对 mirror 严格一些。而 mirror 更像一个库。</h3> <ol><li>这点从使用方法就可以看出来：</li></ol> <ul><li>mirror：</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code>//使用 create-react-app 创建一个新的 app：

<span class="token function">npm</span> i -g create-react-app
$ create-react-app my-app

<span class="token comment">#创建之后，从 npm 安装 Mirror：</span>
$ <span class="token builtin class-name">cd</span> my-app
$ <span class="token function">npm</span> i --save mirrorx
$ <span class="token function">npm</span> start
</code></pre></div><ul><li>dva :</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token comment">#安装 dva-cli</span>
<span class="token comment">#通过 npm 安装 dva-cli 并确保版本是 0.9.1 或以上#</span>
$ <span class="token function">npm</span> <span class="token function">install</span> dva-cli -g
$ dva -v
dva-cli version <span class="token number">0.9</span>.1
<span class="token comment">#创建新应用</span>
<span class="token comment">#安装完 dva-cli 之后，就可以在命令行里访问到 dva 命令（不能访问？）。现在，你可以通过 dva new 创建新应用。</span>

$ dva new dva-quickstart
<span class="token comment">#这会创建 dva-quickstart 目录，包含项目初始化目录和文件，并提供开发服务器、构建脚本、数据 mock 服务、代理服务器等功能。</span>

<span class="token comment">#然后我们 cd 进入 dva-quickstart 目录，并启动开发服务器：</span>

$ <span class="token builtin class-name">cd</span> dva-quickstart
$ <span class="token function">npm</span> start
</code></pre></div><ol start="2"><li>初始项目结构：</li></ol> <ul><li>由于 mirror 是在 create-react-app 脚手架工具上 import 使用，所以他的目录结构比较灵活。</li> <li>dva 更接近于框架，所以，目录结构和 react-react-app 区别较大。刚上手需要简单熟悉下：</li></ul> <p>--- dva 初始项目结构：---</p> <p><img src="https://s2.ax1x.com/2019/01/13/FvrR1K.png" alt=""></p> <ul><li>mock 存放用于 mock 数据的文件；</li> <li>public 一般用于存放静态文件，打包时会被直接复制到输出目录(./dist)；</li> <li>src 文件夹用于存放项目源代码；
<ul><li>asserts 用于存放静态资源，打包时会经过 webpack 处理；</li> <li>components 用于存放 React 组件，一般是该项目公用的无状态组件；</li> <li>models 用于存放模型文件</li> <li>routes 用于存放需要 connect model 的路由组件；可以在此文件夹中编写“页面”</li> <li>services 用于存放服务文件，一般是网络请求等；</li> <li>utils 工具类库</li></ul></li> <li>router.js 路由文件</li> <li>index.js 项目的入口文件</li> <li>index.css 一般是共用的样式</li> <li>.editorconfig 编辑器配置文件</li> <li>.eslintrc ESLint 配置文件</li> <li>.gitignore Git 忽略文件</li> <li>.roadhogrc.mock.js Mock 配置文件</li> <li>.webpackrc 自定义的 webpack 配置文件，JSON 格式，如果需要 JS 格式，可修改为 - .webpackrc.js</li></ul> <h2 id="_2-相关知识："><a href="#_2-相关知识：" class="header-anchor">#</a> 2. 相关知识：</h2> <ol><li>高阶组件：
<blockquote><p>如果一个函数操作其他函数，即将其他函数作为参数或将函数作为返回值，将其称为高阶函数。高阶组件(high-order component)类似于高阶函数，接收 React 组件作为输入，输出一个新的 React 组件。高阶组件让代码更具有复用性、逻辑性与抽象特征。可以对 render 方法作劫持，也可以控制 props 与 state。</p></blockquote></li></ol> <p>首先，高阶组件不是组件。而是函数！ 简单地说，高阶组件就是一个函数接收参数是一个组件，然后返回一个加工修饰后的组件。典型的高阶组件：redux 中的 connect：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">connect</span><span class="token punctuation">(</span><span class="token parameter">state</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> state <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">(</span>IndexPage<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>== 传入 IndexPage 组件，给上面绑定 state 数据后返回==</p> <p>(未完待续)</p></div> <footer><!----> <hr> <!----></footer></article> <div class="sticker vuepress-toc"><div class="vuepress-toc-item vuepress-toc-h2 active"><a href="#_1-使用体会：" title="1.使用体会：">1.使用体会：</a></div><div class="vuepress-toc-item vuepress-toc-h3"><a href="#_1-dva-使用起来更像一个框架，有自己的-模块、路由相关配置，文件结构相对-mirror-严格一些。而-mirror-更像一个库。" title="1. dva 使用起来更像一个框架，有自己的 模块、路由相关配置，文件结构相对 mirror 严格一些。而 mirror 更像一个库。">1. dva 使用起来更像一个框架，有自己的 模块、路由相关配置，文件结构相对 mirror 严格一些。而 mirror 更像一个库。</a></div><div class="vuepress-toc-item vuepress-toc-h2"><a href="#_2-相关知识：" title="2. 相关知识：">2. 相关知识：</a></div></div></div></div> <footer class="footer" data-v-06e1b74b><div class="footer-left-wrap" data-v-06e1b74b><ul class="contact" data-v-06e1b74b></ul></div> <div class="footer-right-wrap" data-v-06e1b74b><ul class="copyright" data-v-06e1b74b></ul></div></footer></div><div class="global-ui"><!----></div></div>
    <script src="/wrong_question_static_page/assets/js/app.9022c753.js" defer></script><script src="/wrong_question_static_page/assets/js/4.8c1e4aa5.js" defer></script><script src="/wrong_question_static_page/assets/js/5.33f70f09.js" defer></script><script src="/wrong_question_static_page/assets/js/17.c4f16e4e.js" defer></script>
  </body>
</html>
